<template>
  <div class="app-container calendar-list-container">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-input
            @keyup.enter.native="handleFilter"
            clearable
            v-model="listQuery.versionName"
            style="width: 150px;margin-right:15px;margin-top:7px"
            class="filter-item"
            placeholder="请输入版本名称"
      ></el-input>
      <!-- style="width: 150px;margin-right:15px;margin-top:7px" -->
      <el-input
            @keyup.enter.native="handleFilter"
            clearable
            v-model="listQuery.versionDesc"
            style="margin-right: 15px;margin-top:7px"
            :style="{ width: inputWid(listQuery.versionDesc) }"
            class="filter-item"
            placeholder="请输入版本描述"
      ></el-input>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>

    <!-- table 表格 -->
    <el-table  :data="tableInfo" v-loading="loadingList" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%">
      <el-table-column  label="序号" type="index" align="center" width="80px"/>
      <el-table-column  label="版本名称" prop='versionName' align="center" width="100px"/>
      <el-table-column  label="创建时间" prop='createTime' align="center" width="200px"/>
      <el-table-column  label="修改时间" prop='updateTime' align="center" width="200px"/>
      <el-table-column  label="版本描述"  prop="versionDesc" align="center" width="200px"/> 
      <el-table-column label="文件名" prop="fileName" align="center" width="300px"/>
      <el-table-column label="状态" prop="inUse" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.inUse==2" size="medium" effect="dark" type="success">强制启用</el-tag>
          <el-tag v-else-if="scope.row.inUse==1" size="medium" effect="dark" type="success">启用</el-tag>
          <el-tag v-else effect="dark" size="medium" type="info">禁用</el-tag>
        </template>
      </el-table-column>
      <!-- 对员工数据进行编辑与删除操作 -->
      <el-table-column  label="操作"   align="center" width="260" v-if="userInfo.roleId != 37">
        <template slot-scope="scope" >
          <el-button size="mini" type="primary" @click="wantEdit(scope.row,2)">强制启用</el-button>
              <el-button size="mini" type="primary" @click="wantEdit(scope.row,1)">启用</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
   
   <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
 
  </div>
</template>


<script>
import { versionPage,delVersion,updateVersionInUse } from '@/api/apk.js'
import VePie from "v-charts/lib/pie";
export default {
  data() {
    return {
      total: '',                                    //数据的总数
      listQuery: {
          versionName: '',                           //版本名称
          versionDesc: '',                           //版本描述
          page: 1,                                   //页码
          limit: 10                                  //每页显示的数据数
      },
      tableInfo: null,                               // 将接收的用户列表数据进行筛选，只取其中的record数组数据，tableInfo为一个数组
      loadingList: false,                            // 控制table的加载动画
      userInfo: this.$store.state.user.userInfo,
    }
  },
  computed: {
      inputWid() {
        return function (value) {
            if(!value || (value.length <= 10)){
              return '170px'
            } else {
              return (170 + (String(value).length-10)*9) + 'px'
            }
        }
      }
  },
  methods: {
    // 搜索按钮绑定的函数，向服务器发送表单数据
    // 所有传输的表单字段都不是必须的，按需查询
    async handleFilter() {
      this.loadingList = true
      let query = Object.assign({},this.listQuery)
      // 用来判断查询的条件是否为空，当不为空时，则返回到首页，也就是第一页
      if(query.versionName == '' && query.versionDesc == '' ) {
         console.log('搜索内容不为空')
      } else {
        query.page = 1
      }
      let {data} = await versionPage(query)
      this.tableInfo = data.records
      this.total = data.total
      this.loadingList = false
    },
    // 删除用户按钮,使用elementui的messageBox弹框组件
    // 传入的数据是数据所在的行数以及该条目所有的信息
    handleDelete(index,row) {
      this.$confirm('这将会永久删除该行数据，是否继续?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async () => {
          let res = await delVersion({versionId: row.versionId})
          this.tableInfo.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 拦截
    wantEdit(row,inUse) {
      if (row.inUse == inUse) return
      this.$confirm(inUse==2?'是否确定强制启用':'是否确定启用', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleEdit(row,inUse)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: inUse==2?'已取消强制启用':'已取消启用'
        });          
      });
    },
    async handleEdit(row,inUse) {
        const {data} = await updateVersionInUse({versionId:row.versionId,inUse:inUse})
        this.handleFilter()
        this.$message({
          type: 'success',
          message: inUse==2?'强制启用成功!':'启用成功!'
        });
    },
    // table表单下方的页码组件改变每页显示的数据条数
     handleSizeChange(val) {
      this.listQuery.limit = val
      this.handleFilter()
    },
    // table表单下方的页码组件改变页面
     handleCurrentChange(val) {
      this.listQuery.page = val
      this.handleFilter()
    }
  },
  // 进入页面获取table信息
  mounted() {
    this.handleFilter()
  }
}
</script>
